<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <title>主页</title>
</head>
<body>
<header id="header">
    <nav id="top-nav">
        <div class="city">
            太原&nbsp;&nbsp;<small>更换</small>
        </div>
        <div class="login">
            <ul>
                <li><a data-toggle="modal" href="#myModal">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
        </div>
    </nav>
    <div class="logo">
        <div class="content">
            <div class="left">
                <img src="img/logo.png" alt="logo" width="240px" height="90px"/>
            </div>
            <div class="right">
                <img src="img/ad.png" alt="广告" width="555px" height="89px"/>
            </div>
        </div>
    </div>
    <nav id="nav">
        <ul class="menu">
            <li class="active"><a href="#">电影首页</a></li>
            <li><a href="#">电影排期</a></li>
            <li><a href="#">移动购票</a></li>
            <li><a href="#">电影谈资</a></li>
            <li class="special"><a href="#"><i class="icon-bullhorn" style="font-size: 23px;color: #F9C221;"></i>&nbsp;&nbsp;活动促销</a></li>
        </ul>
    </nav>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="text-align: center">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" style="font-weight: 900;color:#000">登录</h4>
                </div>
                <div class="modal-body">
                    <form action="#" class="form-horizontal">
                        <div class="form-group">
                            <label for="access" class="col-sm-2 control-label">账号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="access" id="access" placeholder="请输入账号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="password" id="password" placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10 col-sm-push-2">
                                <button type="submit" class="btn btn-primary">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</header>

<!--中间部分-->
<section id="main">
    <div class="main-left">
        <!--轮播-->
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/pic1.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="img/pic2.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="img/pic3.png" alt="Third slide">
                </div>
            </div>
            <div class="close m-close">&times;</div>
        </div>
        <!--标签页-->

        <ul class="tabs">
            <li class=" active" data-to="sub1">正在热映</li>
            <li data-to="sub2">即将上映</li>
            <li data-to="sub3">观影月历</li>
        </ul>
        <div class="tab-content">
            <div class="sub sub1 active">
                <dl>
                    <dt>
                        <img src="img/movie1.jpg" alt=""/>
                        <div class="img-hover">
                            <span class="kind">IMAX-3D</span>
                            <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                            <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                            <span class="describe">符号博士再度拯救人类</span>
                        </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/movie4.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">斯坦森为爱重返杀场</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">机械师2：复活</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/movie4.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">斯坦森为爱重返杀场</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">机械师2：复活</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/movie4.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">斯坦森为爱重返杀场</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">机械师2：复活</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
            </div>
            <div class="sub sub2">
                <dl>
                    <dt>
                        <img src="img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月2日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="img/movie3.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">展现盲人的故事和信仰</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">我的圣徒</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月3日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月2日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="img/movie3.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">展现盲人的故事和信仰</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">我的圣徒</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月3日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月2日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="img/movie3.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">展现盲人的故事和信仰</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">我的圣徒</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月3日</span></dd>

                </dl>
            </div>
            <div class="sub sub3">
                <dl>
                    <dt>
                        <img src="img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-eye-open" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="main-right">
        <div class="notice">
            <div class="notice-title">
                最新公告
            </div>
            <div class="arrow"></div>
            <div class="notice-body">
                <a href="#">关于停用邮箱账afafafdafad号登录sdfafafafdafafafa通知</a>
                <a href="#">万达影城儿童观影购票指南</a>
                <a href="#">关于《万达电影》杂志停刊通知</a>
                <a href="#">关于停用邮箱账号登录通知</a>
            </div>
        </div>
    </div>
</section>

<!--脚-->
<footer id="footer">
    <div class="other">
        <div class="other-content">
            <div class="other-left">
                <a href="#">联系我们</a>
                <a href="#">电影情报</a>
                <a href="#">友情链接</a>
            </div>
            <div class="other-right">
                <a href="#">万达集团</a>
                <a href="#">万达院线官网</a>
            </div>
        </div>
    </div>
    <div class="info">
        <p>Copyright © 2011-2013 Wandafilm.com ALL rights reserved&nbsp;&nbsp;&nbsp;&nbsp;冀ICP备13013593&nbsp;&nbsp;&nbsp;&nbsp;增值电信业务经营许可证B2-20130186 </p>
    </div>
</footer>
</body>
</html>